<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{include file="public/head"}
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>团队管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">
                                <i class="layui-icon layui-icon-delete"></i>批量删除
                            </button>
                            <button class="layui-btn layui-btn-sm" lay-event="add">
                                <i class="layui-icon layui-icon-add-circle"></i>添加
                            </button>
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table
            ,form = layui.form;
        table.render({
            elem: '#test'
            ,url:'{:url("data")}'
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
                ,{field:'image', title:'成员图片',templet:'<div><img src="{{ d.image}}"></div>'}
                ,{field:'name', title:'成员名称'}
                ,{field:'rank', title:'成员等级'}
                ,{field:'is_home', title:'是否推荐',templet:function (d) {
                        if (d.is_home == 0){
                            return '<span class="layui-btn layui-btn-xs layui-btn-normal" >不推荐</span>';
                        }else {
                            return '<span class="layui-btn layui-btn-xs" >推荐</span>';
                        }
                    }}
                ,{field:'sort', title:'排序'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]]
            ,page: {limit:20}
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    let event = checkStatus.data;
                    if (event.length == 0){
                        return false;
                    }
                    let ids = tableCheckedAll(event);
                    layer.confirm('确定删除这 '+ event.length +' 行', function(index){
                        $.post('{:url("del")}',{id:ids},function (res) {
                            if (res.code==1){
                                layer.msg(res.msg,{icon:6,time:1000},function () {
                                    location.reload();
                                });
                            } else {
                                layer.msg(res.msg,{icon:5,time:3000});
                            }
                        });
                    });
                    break;
                case 'add':
                    xadmin.open('添加','{:url("add")}',420,450);
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            let data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除这行', function(index){
                    $.post('{:url("del")}',{id:data.id},function (res) {
                        if (res.code==1){
                            layer.msg(res.msg,{icon:6,time:1000},function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(res.msg,{icon:5,time:3000});
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                xadmin.open('修改','{:url("edit")}?id='+data.id,420,450);
            }
        });
    });
</script>
</html>